<template>
	<div class="reg">
		<div class="reg-icon">
			<p @click="$refs.typefile.click()">点此上传头像</p>
			<input type="file" ref="typefile">
			
		</div>
		<div class="reg-ipt">
			<input type="text" v-model="username" placeholder="请输入要注册的账号">
			<input type="password" v-model="password" placeholder="请输入要注册的密码">
			<input type="text" v-model="nickname" placeholder="请输入昵称">
			
		</div>
		<input type="button" value="注 册" class="reg-btn" @click="reg">
		<p class="result">{{mess}}</p>
	</div>
</template>

<script>
  export default {
    name:'reg',
    props:{},
    data(){
      return {
        username:'',
        password:'',
		nickname:'',
        mess:''
      }
    },
    components:{},
    mounted(){},
    updated(){},
    methods:{
      reg(){
        //1.获取头像  ,传给服务器  (formData)
        let data = new FormData();
        data.append('username',this.username);
        data.append('nickname',this.nickname);
        data.append('password',this.password);
        this.$refs.typefile.files.length && data.append('icon',this.$refs.typefile.files[0])
        
        this.$axios({
          url:'/reg',
          method:'post',
          data
        }).then(
          res=>{
            if(res.err===0){
              //3.注册成功 登录 跳转到登录
			 
              this.$router.push('/login')
            }else if(res.err===1){
              //2.注册失败  渲染错误描述信息到页
              this.mess = res.msg;
			  
            }
          }
        )
        
        
      }
    },
    computed: {
    }
  }
</script>

<style scoped>
	.reg{height: 6.17rem;background-color: white;margin-top: -0.5rem;box-sizing: border-box;padding-top: 0.5rem;}
	.file{width: 1rem;height: 1rem;opacity: 0;position: absolute;left: 0;top: 0;}
	.reg-icon{margin: 0.5rem auto;width: 1rem;height: 1rem; background-color: white;position: relative;overflow: hidden;background-color: #1198FF;border-radius: 50%;position: relative;}
	.reg-icon h1{width:2.18rem;height:1.35rem; background-size:100%; margin:0 auto; margin-top:1.22rem;}
	.reg-icon p{color: white;font-size: 0.14rem;padding-top: 0.4rem;text-align: center;}
	
	.reg-icon input{width:2.5rem ;height: 2.5rem;z-index: 500;position: absolute;left: 12.5rem; top: 0rem;background: #000000;}
	/* .reg-icon img{width: 100%;position: absolute;top: 0;bottom: 0;left:0;right: 0;margin: auto;} */
	input{font-size: .14rem;}
	.reg-ipt input{border-bottom: 0.01rem solid gainsboro;width: 3rem;margin: 0 auto;height: 0.5rem;display: block;padding-left: 0.2rem;}
	.reg-btn{width: 3rem;height: 0.5rem;background-color: #1ea9ff;margin: 0.5rem auto 0;display: block;border-radius: 0.25rem;font-size: 0.2rem;color: white;}
	.result{color: #1ea9ff;position: absolute;top: 3.6rem;left: 0.4rem;font-size: 0.14rem;}
</style>

